yPopup

Description

The yPopup is an element to be used to display content inside a popup. It resembles the yPage in nearly every aspect.

Some uses for the yPopup are:

• Creating SourceLink open/close
• Using submit and close
• Using modal popup for multiple pages

Basic Structure

The basic structure of the yPopup shall be explained in the following. For the general structure of a yComponent please visit the YBase-components basic-structure.

The yPopup as seen above can contain a header and footer and always includes content inbetween.

Header

The header can be toggled on/off by changing the Popup__Display-Type. It contains a title and an icon on the left side and a close button on the right.

Content

The content is the actual center of the component itself. It basically mimics a container which can be designed and filled like a yPage.

Footer

The footer as a specific submodule of the yPopup, can also be toggled equal to the header. It contains two action buttons on the right that can be modified if needed. These two buttons represent a cancel and a submit button which can trigger events.

Properties

Through its various properties the yPopup can be configured to suit your needs. The display below provides you with an overview of all the yPopup properties.

Properties can be changed directly through three methods:

• Inside the Toolbar, which is positioned in your workarea next to your component right where you need it. It shows the most important properties, thus providing a fast and efficient way to configure your component in the most basic way.
• It may also occur in the Toolbar Extension, which is a seamless extension accesible as a dropdown item of the Toolbar. It extends the functionality of the Toolbar by providing advanced pickers for the most used properties.
• Inside the Detail Panel, which is located in the righthand drawer. Every property of a component can be configured here.

Generic

METAread more

Name: componentId

Not Editable

Number Property

--y-popup__component-id

The identifier of the component that is unique within a page.

Name: componentType

Not Editable

String Property

--y-popup__component-type

The type of the component. For this component it is -popup.

Name: name

String Property

--y-popup__name

The custom name of the component. It serves for better identification of the component.

Name: version

String Property

--y-popup__version

The custom version of the Popup-component. This can be used to ensure that all components work well together.

Name: coreTheme

String Property

--y-popup__core-theme

The CoreTheme, which will be apllied to the Popup. For further information on themes visit the themes page.

Name: subTheme

String Property

--y-popup__sub-theme

The subtheme subordinated to the previously specified CoreTheme, which will be apllied to the Popup. For further information on themes visit the themes page.

Name: groupTheme

String Property

--y-popup__group-theme

The group theme is a further variation of the subtheme which is specified especially for variations of a component inside the subtheme. For further information on themes visit the Theme-Manager page.

DISPLAYread more

Name: display

String Property

--y-popup__display

This property specifies the display behavior of the component. This can be be set to:

• none
• block
• flex
• inline

Name: position

Not Editable

String Property

--y-popup__position

This property specifies the type of positioning method used for the component. This can be be set to:

• static
• relative
• absolute
• sticky
• fixed

Name: visible

String Property

--y-popup__visible

This property can toggle the visibility of the component. The two modes are completely hidden and fully shown.

SIZEread more

Name: minWidth

Injectable

UnitNumber Property

--y-popup__min-width

The minimum value for the width of the component. This can be set in:

• px
• pt
• em
• vw
• vh
• %

Name: minHeight

Injectable

UnitNumber Property

--y-popup__min-height

The minimum value for the height of the component. This can be set in:

• px
• pt
• em
• vw
• vh
• %

Name: width

Injectable

UnitNumber Property

--y-popup__width

The value for the width of the component. This can be set in:

• px
• pt
• em
• vw
• vh
• %
• auto

Name: height

Injectable

UnitNumber Property

--y-popup__height

The value for the height of the component. This can be set in:

• px
• pt
• em
• vw
• vh
• %
• auto

Name: maxWidth

Injectable

UnitNumber Property

--y-popup__max-width

The maximum value for the width of the component. This can be set in:

• px
• pt
• em
• vw
• vh
• %
• none

Name: maxHeight

Injectable

UnitNumber Property

--y-popup__max-height

The maximum value for the height of the component. This can be set in:

• px
• pt
• em
• vw
• vh
• %
• none

Name: flex

Not Editable

String Property

--y-popup__flex

The flex property sets the length on flexible items. This sets the value in n-fold shares extrapolated to all other components with the flex display within the same container.

PLACEMENTread more

Name: marginTop

Injectable

UnitNumber Property

--y-popup__margin-top

This property creates a space around the component, outside of the top border. This can be set in percent or pixels.

Name: marginRight

Injectable

UnitNumber Property

--y-popup__margin-right

This property creates a space around the component, outside of the right border. This can be set in percent or pixels.

Name: marginBottom

Injectable

UnitNumber Property

--y-popup__margin-bottom

This property creates a space around the component, outside of the bottom border. This can be set in percent or pixels.

Name: marginLeft

Injectable

UnitNumber Property

--y-popup__margin-left

This property creates a space around the component, outside of the left border. This can be set in percent or pixels.

Name: paddingTop

Injectable

UnitNumber Property

--y-popup__padding-top

This property creates a space within the component, inside of the top border. This can be set in percent or pixels.

Name: paddingRight

Injectable

UnitNumber Property

--y-popup__padding-right

This property creates a space within the component, inside of the right border. This can be set in percent or pixels.

Name: paddingBottom

Injectable

UnitNumber Property

--y-popup__padding-bottom

This property creates a space within the component, inside of the bottom border. This can be set in percent or pixels.

Name: paddingLeft

Injectable

UnitNumber Property

--y-popup__padding-left

This property creates a space within the component, inside of the top border. This can be set in percent or pixels.

Style

BACKGROUNDread more

Name: bgColor

Injectable

Color Property

--y-popup__bg-color

--y-popup__bg-color__normal

--y-popup__bg-color__hover

The color of the background. This can be set as a color from a palette or a custom hex color.

Name: bgUrl

String Property

--y-popup__bg-url

The url to the source of the file to be set as the background. This can be set to a text containing a valid url path. The path should not be to your local files (starting with e.g. C:/...), but instead to the web (starting with e.g. https://www....).

Name: bgSize

String Property

--y-popup__bg-size

The size of the background inside of the Popup-component. This can be set to:

• auto
• cover
• contain

Name: bgPosition

String Property

--y-popup__bg-position

The position of the background inside of the Popup-component. This can be set to:

• none
• center
• left
• right
• top
• bottom
• inherit

Name: bgRepeat

String Property

--y-popup__bg-repeat

This property specifies if the background should be repeated.

BORDERread more

Name: borderTopColor

Injectable

Color Property

--y-popup__border-top-color

--y-popup__border-top-color__normal

--y-popup__border-top-color__hover

The color of the top border. This can be set as a color from a palette or a custom hex color.

Name: borderTopStyle

Injectable

String Property

--y-popup__border-top-style

--y-popup__border-top-style__normal

--y-popup__border-top-style__hover

The style of the top border. This can be be set to:

• solid
• dotted
• dashed
• none

Name: borderTopWidth

Injectable

UnitNumber Property

--y-popup__border-top-width

--y-popup__border-top-width__normal

--y-popup__border-top-width__hover

The width of the top border. This can be set in percent or pixels.

Name: borderRightColor

Injectable

Color Property

--y-popup__border-right-color

--y-popup__border-right-color__normal

--y-popup__border-right-color__hover

The color of the right border. This can be set as a color from a palette or a custom hex color.

Name: borderRightStyle

Injectable

String Property

--y-popup__border-right-style

--y-popup__border-right-style__normal

--y-popup__border-right-style__hover

The style of the right border. This can be be set to:

• solid
• dotted
• dashed
• none

Name: borderRightWidth

Injectable

UnitNumber Property

--y-popup__border-right-width

--y-popup__border-right-width__normal

--y-popup__border-right-width__hover

The width of the right border. This can be set in percent or pixels.

Name: borderBottomColor

Injectable

Color Property

--y-popup__border-bottom-color

--y-popup__border-bottom-color__normal

--y-popup__border-bottom-color__hover

The color of the bottom border. This can be set as a color from a palette or a custom hex color.

Name: borderBottomStyle

Injectable

String Property

--y-popup__border-bottom-style

--y-popup__border-bottom-style__normal

--y-popup__border-bottom-style__hover

The style of the bottom border. This can be be set to:

• solid
• dotted
• dashed
• none

Name: borderBottomWidth

Injectable

UnitNumber Property

--y-popup__border-bottom-width

--y-popup__border-bottom-width__normal

--y-popup__border-bottom-width__hover

The width of the bottom border. This can be set in percent or pixels.

Name: borderLeftColor

Injectable

Color Property

--y-popup__border-left-color

--y-popup__border-left-color__normal

--y-popup__border-left-color__hover

The color of the left border. This can be set as a color from a palette or a custom hex color.

Name: borderLeftStyle

Injectable

String Property

--y-popup__border-left-style

--y-popup__border-left-style__normal

--y-popup__border-left-style__hover

The style of the left border. This can be be set to:

• solid
• dotted
• dashed
• none

Name: borderLeftWidth

Injectable

UnitNumber Property

--y-popup__border-left-width

--y-popup__border-left-width__normal

--y-popup__border-left-width__hover

The width of the left border. This can be set in percent or pixels.

Name: borderRadius

Injectable

UnitNumber Property

--y-popup__border-radius

The radius of the corners of all the borders. This can be set in percent or pixels.

SHADOWread more

Name: boxShadow

Injectable

String Property

--y-popup__box-shadow

--y-popup__box-shadow__normal

--y-popup__box-shadow__hover

The shadow of the component. This is set by the 4 sub-properties x, y, blur and spread of the shadow-property, which can be further read about in the shadow-property section.

OPACITYread more

Name: opacity

Injectable

Number Property

--y-popup__opacity

--y-popup__opacity__normal

--y-popup__opacity__hover

The opacity of all colored parts of the component. This value is set in percent.

ALIGNMENTread more

Name: flexWrap

Boolean Property

--y-popup__flex-wrap

This property specifies whether the flexible items in the Popup-component should wrap or not.

Name: flexDirection

String Property

--y-popup__flex-direction

The direction in which the flexible items inside the Popup-component should align.

Name: justifyContent

String Property

--y-popup__justify-content

The justification of the flexible Popup-container's items when the items do not use all available space on the the main-axis (horizontally).

Name: alignItems

String Property

--y-popup__align-items

The default alignment for items inside the flexible Popup-container.

Name: justifyItems

String Property

--y-popup__justify-items

The justification of the flexible Popup-container's items when the items do not use all available space on the main-axis (vertically).

Name: alignContent

String Property

--y-popup__align-content

The default alignment for content inside the flexible Popup-container.

Name: overflowX

String Property

--y-popup__overflow-x

This property specifies the behavior, when content inside the Popup-component is wider than its parent(vertically). This can be set to:

• visible
• hidden
• scroll
• auto

Name: overflowY

String Property

--y-popup__overflow-y

This property specifies the behavior, when content inside the Popup-component is higher than its parent(horizontally). This can be set to:

• visible
• hidden
• scroll
• auto

Name: showScrollbar

Boolean Property

--y-popup__show-scrollbar

This property specifies, whether the scrollbar should be displayed or not, while keeping scrollability.

POPUPread more

Name: popup__show

Not Editable

Boolean Property

--y-popup__popup__show

This property specifies if a popup should be shown.

Name: popup__displayPosition

String Property

--y-popup__popup__display-position

This property specifies where the popup should be displayed.

Name: popup__displayType

String Property

--y-popup__popup__display-type

This property specifies the display-type for the popup.

Name: popup__displayState

String Property

--y-popup__popup__display-state

This property specifies the state that the popup will be in when being displayed.

Name: popup__animation

String Property

--y-popup__popup__animation

The animation that will be used when displaying the popup.

Name: popup__animationSpeed

Number Property

--y-popup__popup__animation-speed

The speed at which the animation for the entry of the popup will happen.

Name: popup__duration

Number Property

--y-popup__popup__duration

The duration that the popup-animation will need to happen.

Name: popup__persistent

Boolean Property

--y-popup__popup__persistent

This property specifies if the popup has to be handled first before anything else can be clicked.

Name: popup__sourceElementParent

String Property

--y-popup__popup__source-element-parent

The parent of the source element.

Name: popup__sourceElementChild

String Property

--y-popup__popup__source-element-child

The child of the source element.

HEADERread more

Name: header__fontColor

Injectable

Color Property

--y-popup__header__font-color

--y-popup__header__font-color__normal

--y-popup__header__font-color__hover

The color of the font inside the header. This can be set as a color from a palette or a custom hex color.

Name: header__fontFamily

Injectable

String Property

--y-popup__header__font-family

--y-popup__header__font-family__normal

--y-popup__header__font-family__hover

The font-family of the header text. This can be picked from a large list of provided fonts.

Name: header__fontWeight

Injectable

Number Property

--y-popup__header__font-weight

--y-popup__header__font-weight__normal

--y-popup__header__font-weight__hover

The font-weight of the header text. This can be set in a custom number, as example:

• 400 = normal(regular)
• 500 = medium
• 600 = semi bold
• 700 = bold

Name: header__fontSize

Injectable

UnitNumber Property

--y-popup__header__font-size

The font-size of the header text. This can be set in: -cm

• mm
• in
• px
• em
• ex
• ch
• rem

Name: header__fontStyle

Injectable

String Property

--y-popup__header__font-style

--y-popup__header__font-style__normal

--y-popup__header__font-style__hover

The font-style of the header text. This can be set to normal, italic or oblique.

Name: header__textTransform

Injectable

String Property

--y-popup__header__text-transform

--y-popup__header__text-transform__normal

--y-popup__header__text-transform__hover

The text-transformation of the header text. This can be set to:

• capitalize
• uppercase
• lowercase
• none
• full-width

Name: header__fontAlign

Injectable

String Property

--y-popup__header__font-align

The font-align of the header text. This property moves the list text to the desired position, it can be set to left, center or right.

Name: header__title

String Property

--y-popup__header__title

The title that will be displayed inside the header.

Name: header__prefixIcon

Injectable

String Property

--y-popup__header__prefix-icon

The icon to be shown for the prefix of the header text.

Name: header__iconSize

Injectable

UnitNumber Property

--y-popup__header__icon-size

The size of the header's icon. This can be set in: -cm

• mm
• in
• px

Name: header__iconColor

Injectable

Color Property

--y-popup__header__icon-color

The color of the icon inside the header. This can be set as a color from a palette or a custom hex color.

FOOTERread more

Name: footer__fontColorLeft

Injectable

Color Property

--y-popup__footer__font-color-left

--y-popup__footer__font-color-left__normal

--y-popup__footer__font-color-left__hover

The color of the font on the left side inside the footer. This can be set as a color from a palette or a custom hex color.

Name: footer__fontColorRight

Injectable

Color Property

--y-popup__footer__font-color-right

--y-popup__footer__font-color-right__normal

--y-popup__footer__font-color-right__hover

The color of the font on the right side inside the footer. This can be set as a color from a palette or a custom hex color.

Name: footer__fontFamily

Injectable

String Property

--y-popup__footer__font-family

--y-popup__footer__font-family__normal

--y-popup__footer__font-family__hover

The font-family of the footer text. This can be picked from a large list of provided fonts.

Name: footer__fontWeight

Injectable

Number Property

--y-popup__footer__font-weight

--y-popup__footer__font-weight__normal

--y-popup__footer__font-weight__hover

The font-weight of the footer text. This can be set in a custom number, as example:

• 400 = normal(regular)
• 500 = medium
• 600 = semi bold
• 700 = bold

Name: footer__fontSizeLeft

Injectable

UnitNumber Property

--y-popup__footer__font-size-left

The font-size on the left side of the footer text. This can be set in: -cm

• mm
• in
• px
• em
• ex
• ch
• rem

Name: footer__fontSizeRight

Injectable

UnitNumber Property

--y-popup__footer__font-size-right

The font-size on the right side of the footer text. This can be set in: -cm

• mm
• in
• px
• em
• ex
• ch
• rem

Name: footer__fontStyle

Injectable

String Property

--y-popup__footer__font-style

--y-popup__footer__font-style__normal

--y-popup__footer__font-style__hover

The font-style of the footer text. This can be set to normal, italic or oblique.

Name: footer__textTransform

Injectable

String Property

--y-popup__footer__text-transform

--y-popup__footer__text-transform__normal

--y-popup__footer__text-transform__hover

The text-transformation of the footer text. This can be set to:

• capitalize
• uppercase
• lowercase
• none
• full-width

Name: footer__fontAlign

Injectable

String Property

--y-popup__footer__font-align

The font-align of the footer text. This property moves the list text to the desired position, it can be set to left, center or right.

Name: footer__buttonLeftColor

Injectable

Color Property

--y-popup__footer__button-left-color

--y-popup__footer__button-left-color__normal

--y-popup__footer__button-left-color__hover

The color of the button on the left inside the footer. This can be set as a color from a palette or a custom hex color.

Name: footer__buttonRightColor

Injectable

Color Property

--y-popup__footer__button-right-color

--y-popup__footer__button-right-color__normal

--y-popup__footer__button-right-color__hover

The color of the button on the right inside the footer. This can be set as a color from a palette or a custom hex color.

Name: footer__buttonLeftLabel

String Property

--y-popup__footer__button-left-label

The label to be displayed for the button on the left side inside the footer.

Name: footer__buttonRightLabel

String Property

--y-popup__footer__button-right-label

The label to be displayed for the button on the right side inside the footer.

Links

OPENread more

Name: sourceLinkOpen

String Property

--y-popup__source-link-open

This property defines a link to another component for opening the Popup by specifying the componentId or componentName, Page, Component, ID, Event. The data from the link will represent true or false.

CLOSEread more

Name: sourceLinkClose

String Property

--y-popup__source-link-close

This property defines a link to another component for closing the Popup by specifying the componentId or componentName, Page, Component, ID, Event. The data from the link will represent true or false.

Events

LIFECYCLEread more

Name: EvtInit

String Property

--y-popup__-evt-init

This specifies the function to be called, when the Popup is initialized.

INPUTread more

Name: EvtSubmit

String Property

--y-popup__-evt-submit

The event that is triggered when editing the input field is finished. ???

Name: EvtClose

String Property

--y-popup__-evt-close

The event that is triggered when the input is being closed.

Usage

In this section you will find a collection of application scenarios and examples that illustrate how to leverage the yPopup in ways that deviate from its standard behavior, as defined by yBase. This section aims to inspire and guide you through various possibilities, helping you to implement more complex or unique functionalities tailored to your specific needs. General properties that are universally applicable can be found in the yBase usage section.

Displaytype

The yPopup comes with three built-in types.

Empty

Header Example1

Header & Footer

Header Example2

Header Example3

Empty

stylearrow_forward_iospopuparrow_forward_iospopup__display-typeempty

stylearrow_forward_iospopuparrow_forward_iospopup__display-statenormal

Header Example1

stylearrow_forward_iospopuparrow_forward_iospopup__display-typeheader

stylearrow_forward_iospopuparrow_forward_iospopup__display-stateinfo

Header & Footer

stylearrow_forward_iospopuparrow_forward_iospopup__display-typeheader & footer

stylearrow_forward_iospopuparrow_forward_iospopup__display-statesuccess

Header Example2

stylearrow_forward_iospopuparrow_forward_iospopup__display-typeheader

stylearrow_forward_iospopuparrow_forward_iospopup__display-statewarning

Header Example3

stylearrow_forward_iospopuparrow_forward_iospopup__display-typeheader

stylearrow_forward_iospopuparrow_forward_iospopup__display-stateerror

tip

• Popup__Persistent enables that it can't be closed by clicking away.
• When enabling Popup__Backdrop, the popup gets a backdrop added, which blurs out the back.
• Popup__Timed makes the popup time based and closes it automatically after Popup__Duration has passed.

Background

Cover

Repeat

Cover

stylearrow_forward_iosbackgroundarrow_forward_iosbg-imagehttps://www.vectorsoft.de/wp-content/uploads/2021/09/yeet_mobile-1024x768.png

stylearrow_forward_iosbackgroundarrow_forward_iosbg-sizecover

Repeat

stylearrow_forward_iosbackgroundarrow_forward_iosbg-imagehttps://www.vectorsoft.de/wp-content/uploads/2021/09/yeet_mobile-1024x768.png

stylearrow_forward_iosbackgroundarrow_forward_iosbg-sizecontain

stylearrow_forward_iosbackgroundarrow_forward_iosbg-repeatrepeat

Alignment

Row

Column

Wrap

Row

stylearrow_forward_iosalignmentarrow_forward_iosflex-directionrow

stylearrow_forward_iosalignmentarrow_forward_iosjustify-contentcenter

Column

stylearrow_forward_iosalignmentarrow_forward_iosflex-directioncolumn

stylearrow_forward_iosalignmentarrow_forward_iosjustify-contentcenter

stylearrow_forward_iosalignmentarrow_forward_iosalign-itemscenter

Wrap

stylearrow_forward_iosalignmentarrow_forward_iosflex-directionrow

stylearrow_forward_iosalignmentarrow_forward_iosjustify-contentcenter

stylearrow_forward_iosalignmentarrow_forward_iosalign-itemsflex-start

stylearrow_forward_iosalignmentarrow_forward_iosflex-wrapwrap

Info: Scroll behavior

If the content exceeds the parent element itself, a scrollbar will appear. When needed, this scrollbar can be removed while keeping scrollability, when toggling the property show-scrollbar to false.

Positioning

To position a yPopup, you have to choose a position inside the PositionPicker.

Inner top center

Outer bottom center

Inner center center

Inner top center

stylearrow_forward_iospopuparrow_forward_iospopup__display-typeheader

stylearrow_forward_iospopuparrow_forward_iosdisplayPositioninner-top-center

stylearrow_forward_iospopuparrow_forward_iossourceElementParentYOUR_PAGE

stylearrow_forward_iospopuparrow_forward_iossourceElementChildYOUR_ELEMENT

Outer bottom center

stylearrow_forward_iospopuparrow_forward_iospopup__display-typeheader

stylearrow_forward_iospopuparrow_forward_iosdisplayPositionouter-bottom-center

stylearrow_forward_iospopuparrow_forward_iossourceElementParentYOUR_PAGE

stylearrow_forward_iospopuparrow_forward_iossourceElementChildYOUR_ELEMENT

Inner center center

stylearrow_forward_iospopuparrow_forward_iospopup__display-typeheader

stylearrow_forward_iospopuparrow_forward_iosdisplayPositioninner-center-center

stylearrow_forward_iospopuparrow_forward_iossourceElementParentYOUR_PAGE

stylearrow_forward_iospopuparrow_forward_iossourceElementChildYOUR_ELEMENT

Creating SourceLink Open/Close

To display a new popup, you need to make some moves for it to be rendered.

How to:

1. Create a yPage with a yButton component in your application.
2. Open your yPopup again.
3. Within the Detail Panel, proceed to the Links section and unfold Open.
4. Create a new SourceLink for Source-Link-Open to the yButton on the previously created yPage.
   It should look like: y-page:1:y-button:2:click.

tip

The same procedures can be done with any other trigger element and also applys for Source-Link-Close.

Using Submit and Close Event

How to:

You can use the yPopup as a modal dialog and react on user interactions such as submit and close.

1. Create two yInput inside the yPopup and change their Type to number.
2. Select the yPopup again.
3. Within the Detail Panel, proceed to Style section and unfold Popup.
4. Change the Popup__Display-Type to Header & Footer.
5. The proceed to the Event section and unfold Input and open EvtSubmit.

Code example:

In this example we have a simple yPopup containing a minified calculator that can only add two values. When the user submits, we read the two input values which should be added and alert the result.

EvtSubmit

// function onPopup_1_EvtSubmit (apiObject, component, eventData) {

const inputA = apiObject.ui.getObject(1, "y-input");
const inputB = apiObject.ui.getObject(2, "y-input");

const num1 = inputA.get("style", "content", "inputNumber");
const num2 = inputB.get("style", "content", "inputNumber");

alert("result: ", num1 + num2);

// }

Using Modal Popup for Multiple Pages

How to:

You can use the yPopup universally on multiple pages inside your project.

1. Open the Detail Panel and proceed to Style and unfold the group Popup.
2. Change the Popup__Display-Type to Header & Footer.
3. Create a yPage with a yButton in your application.
4. Within the Detail Panel of the yButton, proceed to the Event section and open EvtClicked.

Code example:

In this example the user can call the popupOpen function to open a certain yPopup, when a yButton is clicked.

EvtClicked yButton

// function onButton_5_EvtClicked (apiObject, component, eventData) {

apiObject.popup.popupOpen(1, "y-popup");

// }